<template>
  <div class="bg-light">
    <div class="container-header">
      <SearchSale ref="search"  @onSearchData="onChoiceTab"></SearchSale>
    </div>
    <Tabs v-model="tab" @on-click="onChoiceTab"> 
      <TabPane label="限制品牌" name="tab2">
          <div>
            <table  cellspacing="0" class="table">
              <Loader :status="status"></Loader>
              <thead>
                <tr>
                  <th width="20"></th>
                  <!-- 工厂特价查看 -->
                  <template>
                    <th v-for="item in bargainListData.columns" :key="item.id" :width="item.width">{{item.title}}</th>
                  </template>
                </tr>
              </thead>
            </table>
          </div>
          <div class="outer">
            <div class="inner">
              <div class="fixedHegiht">
                <table cellspacing="0" class="table">
                  <!-- 工厂特价查看 -->
                  <template>
                    <tbody v-for="item in getBgLmtData" :key="item.id">
                      <tr>
                        <td width="20">
                          <Icon type="ios-arrow-down" size="20" v-if="item.showChildren" class="ml cursor" @click="onShowChild(item)"></Icon>
                          <Icon type="ios-arrow-forward" size="20" v-if="item.productSkuList && item.productSkuList.length && !item.showChildren" @click="onShowChild(item)" class="ml cursor"></Icon>
                        </td>
                        <td width="150">{{item.code}}</td>
                        <td width="150">{{item.skuCode}}</td>
                        <td width="300"><div class="flexLeft"><div class="e2">{{item.title}}</div></div></td>
                        <td class="font-red" width="150">{{getMinMaxValue(item.productSkuList, {index: 'salePrice'})}}</td>
                        <td class="font-red" width="150">{{getMinMaxValue(item.productSkuList, {index: 'sale'})}}</td>
                        <td class="font-red" width="150">{{getMinMaxValue(item.productSkuList, {index: 'giftPoint'})}}</td>
                        <td class="font-red" width="150">{{getMinMaxValue(item.productSkuList, {index: 'giftRebate'})}}</td>
                        <td class="font-red" width="150">{{item.productSkuList[0].giftCouponName ? item.productSkuList[0].giftCouponName : '--'}}</td>
                        <td class="font-red" width="150">{{getMinMaxValue(item.productSkuList, {index: 'sellOutQuantity'})}}</td>
                      </tr>
                      <template v-if="item.productSkuList && item.productSkuList.length">
                        <tr v-for="child in item.productSkuList" :key="child.id" v-show="item.showChildren">
                          <td></td>
                          <td>-</td>
                          <td>{{child.skuCode}}</td>
                          <td><div class="flexLeft"><div class="e2">{{child.title}}</div></div></td>
                          <td class="font-red" width="150">{{child.salePrice | currency(true)}}</td>
                          <td class="font-red" width="150">{{child.sale | currency(true)}}</td>
                          <td class="font-red" width="150">{{child.giftPoint}}</td>
                          <td class="font-red" width="150">{{child.giftRebate}}</td>
                          <td class="font-red" width="150">{{child.giftCouponName}}</td>
                          <td class="font-red" width="150">{{child.sellOutQuantity}}</td>
                        </tr>
                      </template>
                    </tbody>
                  </template>
                </table>
              </div>
            </div>
          </div>
          <div class="pager" v-if="tab=='tab2'">
            <Page
              :total="totalItem" 
              :current="currentPage"
              :page-size="pageSize"
              @on-change="onPageChange"
              @on-page-size-change="onPageSizeChange"
              show-sizer 
              :transfer="true"
              placement="top">
            </Page>
          </div>
      </TabPane>
      <TabPane label="不限制品牌" name="tab3">
          <div>
            <table  cellspacing="0" class="table">
              <thead>
                <tr>
                  <th width="20"></th>
                  <!-- 工厂特价查看 -->
                  <template>
                    <th v-for="item in bargainListData.columns" :key="item.id" :width="item.width">{{item.title}}</th>
                  </template>
                </tr>
              </thead>
            </table>
          </div>
          <div class="outer">
            <div class="inner">
              <div class="fixedHegiht">
                <table cellspacing="0" class="table">
                  <Loader :status="status"></Loader>
                  <!-- 工厂特价查看 -->
                  <template>
                    <tbody v-for="item in getBgUnLmtData" :key="item.id">
                      <tr>
                        <td width="20">
                          <Icon type="ios-arrow-down" size="20" v-if="item.showChildren" class="ml cursor" @click="onShowChild(item)"></Icon>
                          <Icon type="ios-arrow-forward" size="20" v-if="item.productSkuList && item.productSkuList.length && !item.showChildren" @click="onShowChild(item)" class="ml cursor"></Icon>
                        </td>
                        <td width="150">{{item.code}}</td>
                        <td width="150">{{item.skuCode}}</td>
                        <td width="300"><div class="flexLeft"><div class="e2">{{item.title}}</div></div></td>
                        <td class="font-red" width="150">{{getMinMaxValue(item.productSkuList, {index: 'salePrice'})}}</td>
                        <td class="font-red" width="150">{{item.sale}}</td>
                        <td class="font-red" width="150">{{getMinMaxValue(item.productSkuList, {index: 'giftPoint'})}}</td>
                        <td class="font-red" width="150">{{getMinMaxValue(item.productSkuList, {index: 'giftRebate'})}}</td>
                        <td class="font-red" width="150">{{item.productSkuList[0].giftCouponName ? item.productSkuList[0].giftCouponName : '--'}}</td>
                        <td class="font-red" width="150">{{getMinMaxValue(item.productSkuList, {index: 'sellOutQuantity'})}}</td>
                      </tr>
                      <template v-if="item.productSkuList && item.productSkuList.length">
                        <tr v-for="child in item.productSkuList" :key="child.id" v-show="item.showChildren">
                          <td></td>
                          <td>-</td>
                          <td>{{child.skuCode}}</td>
                          <td><div class="flexLeft"><div class="e2">{{child.title}}</div></div></td>
                          <td class="font-red" width="150">{{child.salePrice | currency(true)}}</td>
                          <td class="font-red" width="150">{{child.sale | currency(true)}}</td>
                          <td class="font-red" width="150">{{child.giftPoint}}</td>
                          <td class="font-red" width="150">{{child.giftRebate}}</td>
                          <td class="font-red" width="150">{{child.giftCouponName}}</td>
                          <td class="font-red" width="150">{{child.sellOutQuantity}}</td>
                        </tr>
                      </template>
                    </tbody>
                  </template>
                </table>
            </div>
          </div>
        </div>
          <div class="pager" v-if="tab=='tab3'">
            <Page
              :total="totalItem1" 
              :current="currentPage"
              :page-size="pageSize"
              @on-change="onPageChange"
              @on-page-size-change="onPageSizeChange"
              show-sizer 
              :transfer="true"
              placement="top">
            </Page>
          </div>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import bargainListData from './BaigainProductData'
import SearchSale from '@/views/sales/common/SearchSale'
import {setItem, setData, getMinValue, getMaxValue, getSum } from "@/views/sales/common/TableSaleMethods"
import { preFixPath } from '@/util';
  export default {
    components: {
      SearchSale
    },
    props: {
      list: ''
    },
    data() {
      return {
        id: this.$route.query.id || '',
        tab: 'tab2',
        totalItem: null,
        totalItem1: null,
        pageSize: window.$pageSize,
        currentPage: 1,
        bargainListData: bargainListData,
        getBgLmtData: [],
        getBgUnLmtData: [],
        status: 'pass'
      } 
    },
    mounted() {
      this.$refs.search.isShow = "tab2"
      this.getSkuPage({size: window.$pageSize, current: 1, self: this, isLimitBrand: true})
      // this.getSkuPage({size: window.$pageSize, current: 1, self: this, isLimitBrand: false})
      // this.initData()
    },
    methods: {
      onChoiceTab() {
        this.currentPage = 1
        this.pageSize = 20
        if (this.tab == 'tab2') {
          this.getSkuPage({size: window.$pageSize, current: this.currentPage, isLimitBrand: true})
        } else if (this.tab == 'tab3'){
          this.getSkuPage({size: window.$pageSize, current: this.currentPage, isLimitBrand: false})
        }
      },
      onPageChange(val) {
        this.currentPage = Number(val)
        let param = { 
          size: this.pageSize,
          current: this.currentPage
        }
        if (this.tab == 'tab2') {
          this.getSkuPage({size: this.pageSize, current: this.currentPage, isLimitBrand: true})
        } else if (this.tab == 'tab3'){
          this.getSkuPage({size: this.pageSize, current: this.currentPage, isLimitBrand: false})
        }
      },
      onPageSizeChange(val) {
        this.pageSize = Number(val)
        let param = { 
          size: this.pageSize,
          current: this.currentPage
        }
        if (this.tab == 'tab2') {
          this.getSkuPage({size: this.pageSize, current: this.currentPage, isLimitBrand: true})
        } else if (this.tab == 'tab3'){
          this.getSkuPage({size: this.pageSize, current: this.currentPage, isLimitBrand: false})
        }
      },
      // onSearchData() {
      //   if (this.tab == 'tab2') {
      //     this.getSkuPage({size: window.$pageSize, current: 1, self: this, isLimitBrand: true})
      //   } else if (this.tab == 'tab3'){
      //     this.getSkuPage({size: window.$pageSize, current: 1, self: this, isLimitBrand: false})
      //   }
      // },
      getSkuPage(param) {
        let self = this
        self.status = 'loading'
        return new Promise((resolve, reject) => {
          this.$ajaxGet(`/activity/sku/page`,{activityId: this.id, isLimitBrand: param.isLimitBrand, current: param.current, size: param.size, storeCategoryId: this.$refs.search.searchForm.ownerCategoryId, productName: this.$refs.search.searchForm.keyword, productBrandId: this.$refs.search.searchForm.brandId}).then(data => {
            if (param.isLimitBrand) {
              this.getBgLmtData = setData(data)
              self.totalItem = Number(data.total)
              setItem(this.getBgLmtData, ['sellOutQuantity', 'giftRebate', 'giftPoint', 'sale'])
            } else {
              self.getBgUnLmtData = setData(data)
              self.totalItem1 = Number(data.total)
              setItem(this.getBgUnLmtData, ['sellOutQuantity', 'giftRebate', 'giftPoint', 'sale'])
            }
            // let self = param.sel
            self.status = 'pass'
            self.currentPage = Number(data.current)
            self.pageSize = Number(data.size)
            resolve(data)
          })
        })
      },
      // getSkuPage(param) {
      //   param.self = this
      //   // this.status = 'loading'
      //   param.activityId = this.id
      //   this.$store.dispatch('getSkuPage', param).then(data => {
      //     this.$store.dispatch("getSkuCount", {id: this.id, isLimitBrand: param.isLimitBrand})
      //   })
      // },
      initData() {
        this.getBgLmtData = this.setData(this.setDataBargain(this.list, true))
        this.getBgUnLmtData = this.setData(this.setDataBargain(this.list, false))
      },
      onShowChild(item) {
        item.showChildren = !item.showChildren;
      },
      getMinMaxValue(param, object) {
        return  `[${getMinValue(param, object)}-${getMaxValue(param, object)}]`;
      },
      setData(data) {
        return  data.map(item => {
            return {
              code:item[0].productSn,
              skuCode: '-',
              name: item[0].productSkuInfo.title,
              img: preFixPath + item[0].productSkuInfo.productPrimaryImg,
              marketPrice: '',
              showChildren: false,
              children: item.map(child => {
                return {
                  code: child.productSn,
                  skuCode: child.productSkuInfo.skuSn,
                  name: child.productSkuInfo.title,
                  img: preFixPath + child.productSkuInfo.productPrimaryImg,
                  marketPrice: child.productSkuInfo.salePrice,
                  activityFactoryGiftDTO: child.activityFactoryGiftDTO,
                  sellOutQuantity: child.sellOutQuantity,
                  promotionPrice: child.promotionPrice
                }
            })
          }
      })
      },
      setDataBargain(data, type) {
        let data1 = JSON.parse(JSON.stringify(data))
        let limit =  []
        let newData = []
          limit = data1.map(item => {
            return item.item.map(todo=> {
              if (todo.isLimitBrand == type) {
                return todo
              } else {
                return false
              }
            })
          })
          for(var i = 0;i<limit.length;i++){
            for(var j =0; j<limit[i].length;j++) {
              if(!limit[i][j]) {
                limit[i].splice(j, 1)
                j--
              }
            }
            if(!limit[i].length) {
              limit.splice(i, 1)
              i--
            }
          }
          return limit
      }
    }
    // watch: {
    //   list() {
    //     this.initData()
    //   }
    // }
  }
</script>

<style lang="less" scoped>
.table td {
  padding: 0;
}
</style>